Component({
  externalClasses: ['custom-class'],
  properties: {
    percent: {
      type: String,
      optionalTypes: [Number],
      value: '-',
      observer: function(newVal) {
        newVal > this.data.max &&
          this.setData({
            percent: 100,
          });

        String(newVal).replace(/(^\s*)|(\s*$)/g, '').length === 0 &&
          this.setData({
            percent: '-',
            status: 'normal',
          });
      },
    },

    status: {
      type: String,
      value: 'normal',
    },
    max: {
      type: Number,
      value: 100,
    },
    strokeWidth: {
      type: Number,
      value: 4,
    },
    completions: {
      type: Number,
      value: 0,
    },
    hideInfo: Boolean,
    isUnit: {
      type: Boolean,
      value: true,
    },
    isPercent: {
      type: Boolean,
      value: true,
    },
  },
});
